<style lang="scss" scoped>

  .delegate-container{
    //padding: 0 10px;
  }

  .project-banner{
    width:100%;
    height:80px;
    display: block;
    float: left;
    clear: both;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .delegate-container{
    width:100%;
    height: auto;
    float: left;
    clear: both;
  }

  .pagination-container{
    width: 100%;
    float: left;
    clear: both;
    height:auto;
    text-align: center;
  }

  .project-devide{
    width:100%;
    height: 35px;
    background: #ebebeb;
    clear: both;
    float: left;
  }

</style>

<template>
  <div class="delegate-container">
      <div class="project-banner">
        <el-form :inline="true">
          <el-col :span="5">
            <el-form-item label="时间">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="请选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="编号">
              <el-input placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="项目名称">
              <el-input placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="类型">
              <el-input  placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="下达状态">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button>hello</el-button>
          </el-col>
        </el-form>
      </div>
      <div class="project-devide">
      </div>
      <el-table :data="project" style="width: 100%;">
        <el-table-column prop="id" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="number" label="编号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="项目名称" align="center">
        </el-table-column>
        <el-table-column prop="type" label="类型" align="center">
        </el-table-column>
        <el-table-column prop="status" label="下达状态" align="center">
        </el-table-column>
        <el-table-column prop="address" label="项目地址" align="center">
        </el-table-column>
        <el-table-column prop="resDepartment" label="责任部门" align="center">
        </el-table-column>
        <el-table-column prop="operate" label="操作" width="200px" align="center">
          <template scope="scope">
            <el-button type="default" size="small" @click="view(scope.row.id)" style="cursor: pointer;user-select: none;">查看</el-button>
            <el-button type="default" size="small" @click="modify(scope.row.id)" style="cursor: pointer;user-select: none;">修改</el-button>
            <el-button type="default"  size="small" @click="delete(scope.row.id)" style="cursor: pointer;user-select: none;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
  </div>
</template>

<script>
import {
  Col,DatePicker,Table,Button,TableColumn,Input,Form,FormItem,Icon,
} from "element-ui";

  export default {
      name:"DelegateProject",
      data(){
        return {
          options: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
          value: '',
          value1:'',
          pickerOptions0: {
            disabledDate(time) {
              return time.getTime() < Date.now() - 8.64e7;
            }
          },
          project: [{
            id: '1',
            number: '20134064',
            name: '上海市普陀区金沙江路',
            type:"道路工程",
            status:'已下达',
            address:'四川省成都市天府新区',
            resDepartment:'市场部',
            operate:'删除'
          },{
            id: '2',
            number: '20134064',
            name: '上海市普陀区金沙江路',
            type:"道路工程",
            status:'已下达',
            address:'四川省成都市天府新区',
            resDepartment:'市场部',
            operate:'删除'
          }, {
              id: '3',
              number: '20134064',
              name: '上海市普陀区金沙江路',
              type:"道路工程",
              status:'已下达',
              address:'四川省成都市天府新区',
              resDepartment:'市场部',
              operate:'删除'
          }, {
              id: '4',
              number: '20134064',
              name: '上海市普陀区金沙江路',
              type:"道路工程",
              status:'已下达',
              address:'四川省成都市天府新区',
              resDepartment:'市场部',
              operate:'删除'
          }, {
              id: '5',
              number: '20134064',
              name: '上海市普陀区金沙江路',
              type:"道路工程",
              status:'已下达',
              address:'四川省成都市天府新区',
              resDepartment:'市场部',
              operate:'删除'
          },{
            id: '6',
            number: '20134064',
            name: '上海市普陀区金沙江路',
            type:"道路工程",
            status:'已下达',
            address:'四川省成都市天府新区',
            resDepartment:'市场部',
            operate:'删除'
          },{
            id: '7',
            number: '20134064',
            name: '上海市普陀区金沙江路',
            type:"道路工程",
            status:'已下达',
            address:'四川省成都市天府新区',
            resDepartment:'市场部',
            operate:'删除'
          },{
            id: '8',
            number: '20134064',
            name: '上海市普陀区金沙江路',
            type:"道路工程",
            status:'已下达',
            address:'四川省成都市天府新区',
            resDepartment:'市场部',
            operate:'删除'
          },{
            id: '9',
            number: '20134064',
            name: '上海市普陀区金沙江路',
            type:"道路工程",
            status:'已下达',
            address:'四川省成都市天府新区',
            resDepartment:'市场部',
            operate:'删除'
          },{
            id: '10',
            number: '20134064',
            name: '上海市普陀区金沙江路',
            type:"道路工程",
            status:'已下达',
            address:'四川省成都市天府新区',
            resDepartment:'市场部',
            operate:'删除'
          }]
        };
      },
      components:{
        'ElCol':Col,
        'ElForm':Form,
        'ElFormItem':FormItem,
        'ElInput':Input,
        'ElDatePicker':DatePicker,
        'ElButton':Button,
        'ElTable':Table,
        'ElTableColumn':TableColumn,
        'ElIcon':Icon
      },
      methods:{
        /**
         * 查看细节
         * @param id
         */
        view(id){
          this.$router.push({name: "ProjectDetail",params: { projectId: id }})
        },
        /**
         * 修改信息
         * @param id
         */
        modify(id){
          console.log('modify:'+id);
        },
        /**
         * 删除信息
         * @param id
         */
        delete(id){
          console.log('delete:'+id);
        }
      }
  }

</script>
